<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<style>
  div {
    width: 100px;
    height: 100px;
    background-color: pink;
    display: inline;  /*块级标签转换为行内标签显示模式*/
  }
  span {
    width: 100px;
    height: 100px;
    background-color: hotpink;
    display: block; /*行内标签转换为块级标签显示模式*/
  }
  a {
    width: 50px;
    height: 20px;
    background-color: deeppink;
    display: inline-block; /*行内标签转换为行内块标签显示模式*/
  }
</style>
<body>

<div>123</div>
<div>345</div>
<div>678</div>

<span>abc</span>
<span>def</span>
<span>ghi</span>

<a href="#">123</a>
<a href="#">456</a>
</body>
</html>
